<template>
  <div class="dashboard-container">
    <div class="app-container">
      <page-tools :show-before="true">
        <template #before> 共{{ page.total }}条数据 </template>
        <template #after>
          <el-button
            type="warning"
            size="small"
            @click="$router.push('/import')"
          >导入Excel</el-button>
          <el-button
            type="danger"
            size="small"
            @click="exportData"
          >导出为Excel</el-button>
          <el-button
            type="primary"
            size="small"
            @click="addEmploy"
          >新建员工</el-button>
        </template>
      </page-tools>
      <el-card>
        <el-table style="width: 100%" border :data="list">
          <el-table-column type="index" label="序号" sortable="" />
          <el-table-column prop="username" label="姓名" sortable="" />
          <el-table-column label="头像" align="center">
            <template slot-scope="{ row }">
              <img
                slot="reference"
                v-imgError="require('@/assets/common/bigUserHeader.png')"
                :src="row.staffPhoto"
                style="
                  border-radius: 50%;
                  width: 100px;
                  height: 100px;
                  padding: 10px;
                "
                alt=""
                @click="showQrCode(row.staffPhoto)"
              >
            </template>
          </el-table-column>
          <el-table-column prop="workNumber" label="工号" sortable="" />
          <el-table-column
            prop="formOfEmployment"
            label="聘用形式"
            sortable=""
            :formatter="formatEmployment"
          >
            <!-- <template v-slot="{ row }">
              {{ row.formOfEmployment | filterEmployment }}
            </template> -->
          </el-table-column>
          <el-table-column prop="departmentName" label="部门" sortable="" />
          <el-table-column prop="timeOfEntry" label="入职时间" sortable="">
            <template v-slot="{ row }">
              {{ row.timeOfEntry | formatDate }}
            </template>
          </el-table-column>
          <el-table-column prop="enableState" label="账户状态" sortable="">
            <template v-slot="{ row }">
              <el-switch
                :value="row.enableState === 1"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template v-slot="{ row }">
              <el-button
                type="text"
                size="small"
                @click="$router.push(`/employees/detail/${row.id}`)"
              >查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button
                type="text"
                size="small"
                @click="editRole(row.id)"
              >角色</el-button>
              <el-button
                type="text"
                size="small"
                @click="delEmployee(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row type="flex" justify="center">
          <el-pagination
            :current-page="page.page"
            :page-size="page.size"
            :total="page.total"
            layout="prev, pager, next"
            @current-change="changePage"
          />
        </el-row>
        <!-- 添加员工 弹窗 -->
        <add-employ
          :show-add-dailog="showAddDailog"
          @update:visible="showAddDailog = $event"
        />
        <!-- 员工头像 二维码 弹层显示 -->
        <el-dialog title="二维码" :visible.sync="showCodeDialog" width="30%">
          <el-row type="flex" justify="center">
            <canvas ref="myCanvas" />
          </el-row>
        </el-dialog>
        <!-- 角色 权限 弹出层 -->
        <assginRole ref="assignRole" :show-role-dialog.sync="showRoleDialog" :user-id="userId" />
      </el-card>
    </div>
  </div>
</template>

<script>
// 引入 员工 状态 数据
import { delEmployee, getEmployListState } from '@/api/employees'
// 导入 员工 对应 数据的状态 显示 工作状态 的数据
import employEnum from '@/api/constant/employees'
// 导入 添加员工 弹层
import addEmploy from './components/add-employ.vue'
// 导入 lodash
import { pick } from 'lodash'
import { formatDate } from '@/filters'
// 导入 二维码 生成器
import QrCode from 'qrcode'
// 员工 角色 权限弹出层
import assginRole from './components/assign-role.vue'
export default {
  name: 'Employees',
  components: {
    // 新增角色弹出层
    addEmploy,
    // 角色 权限 弹出层
    assginRole
  },
  // 格式化 日期样式
  filters: {
    filterEmployment(val) {
      const f = employEnum.hireType.find((e) => e.id === val)
      // console.log(f)
      return f ? f.value : '未知'
    }
  },
  props: {},
  data() {
    return {
      // 控制编辑页面的 显示
      showAddDailog: false,
      // 页面 数据组
      page: {
        page: 1,
        size: 5,
        total: 0
      },
      // 员工数据 组
      list: [],
      // 在加载 的过程中 是否 显示 loading 加载数据 状态
      loading: false,
      showCodeDialog: false,
      showRoleDialog: false,
      userId: null
    }
  },
  created() {
    // 获取 员工 数据 状 态
    this.getEmployListState()
  },
  mounted() {},
  methods: {
    // 导出 数据 成 excel 文档
    exportData() {
      const headers = {
        姓名: 'username',
        手机号: 'mobile',
        入职日期: 'timeOfEntry',
        聘用形式: 'formOfEmployment',
        转正日期: 'correctionTime',
        工号: 'workNumber',
        部门: 'departmentName'
      }
      import('@/vendor/Export2Excel').then(async(excel) => {
        // 从后端 数据库中 获取 到员工 数据
        const { rows } = await getEmployListState({
          ...this.page,
          size: this.page.total
        })
        console.log(rows)
        // 改变 数据结构
        const data = rows.map((t) => {
          const o = pick(t, Object.values(headers))
          o.timeOfEntry = formatDate(o.timeOfEntry)
          o.correctionTime = formatDate(o.correctionTime)
          const f = employEnum.hireType.find(
            (t) => t.id === o.formOfEmployment
          )
          console.log(o)
          o.formOfEmployment = f ? f.value : '未知'
          return Object.values(o)
        })
        console.log(data)
        // 导入 lodash 的方法 处理数据
        console.log(pick())
        console.log(excel)
        const multiHeader = [['姓名', '主要信息', '', '', '', '', '部门']]
        const merges = ['A1:A2', 'B2:F1', 'G1:G2']
        excel.export_json_to_excel({
          header: Object.keys(headers),
          data: data,
          filename: '员工数据',
          multiHeader,
          merges
        })
      })
    },
    // 添加 新员工 弹出弹窗
    addEmploy() {
      this.showAddDailog = true
    },
    // 这是一个 关于 聘用方式的 格式化
    formatEmployment(row, col, cellValue, index) {
      const f = employEnum.hireType.find((e) => e.id === cellValue)
      // console.log(f)
      return f ? f.value : '未知'
    },
    //  点击 删除 按钮 删除 角色
    delEmployee(id) {
      this.$confirm('确认删除该角色嘛?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: async(action) => {
          // 成功 就执行这个
          try {
            await delEmployee(id)
          } catch (error) {
            console.log('报错了')
            this.$message.warning('删除失败')
          }
        }
      })
    },
    // 下一页 页面的 数据
    async getEmployListState() {
      this.loading = true
      const { total, rows } = await getEmployListState(this.page)
      this.page.total = total
      this.list = rows
      this.loading = false
    },
    // 改变 页面 数据
    changePage(newPage) {
      this.page.page = newPage
      this.getEmployListState()
    },
    // 点击 头像 显示 二维码
    showQrCode(url) {
      // url存在的情况下 才弹出层
      if (url) {
        this.showCodeDialog = true // 数据更新了 但是我的弹层会立刻出现吗 ？页面的渲染是异步的！！！！
        // 有一个方法可以在上一次数据更新完毕，页面渲染完毕之后
        this.$nextTick(() => {
          // 此时可以确认已经有ref对象了
          QrCode.toCanvas(this.$refs.myCanvas, url) // 将地址转化成二维码
          // 如果转化的二维码后面信息 是一个地址的话 就会跳转到该地址 如果不是地址就会显示内容
        })
      } else {
        this.$message.warning('该用户还未上传头像')
      }
    },
    // 点击 角色 弹出
    async editRole(id) {
      this.userId = id // props传值 是异步的
      await this.$refs.assignRole.getUserBaseInfoById(id) // 父组件调用子组件方法
      this.showRoleDialog = true
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
